<template>
  <div class="top">
    <div class="server-info">
      <el-row :gutter="10">
        <el-col :span="8">
          <el-card class="box-card" v-if="info.Server">
            <div slot="header" class="clearfix">
              <span class="el-icon-s-platform"></span> {{$t('server.server')}}
            </div>
            <div><el-tag effect="dark">{{$t('server.redis_version')}}：{{info.Server.redis_version}}</el-tag></div>
            <div><el-tag effect="dark" type="success">{{$t('server.os')}}：{{info.Server.os}}</el-tag></div>
            <div><el-tag effect="dark" type="info">{{$t('server.process_id')}}：{{info.Server.process_id}}</el-tag></div>        
            <div><el-tag effect="dark" type="danger">{{$t('server.multiplexing_api')}}：{{info.Server.multiplexing_api}}</el-tag></div>
            <div><el-tag effect="dark" type="warning">{{$t('server.redis_mode')}}：{{info.Server.redis_mode}}</el-tag></div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card" v-if="info.Memory">
            <div slot="header" class="clearfix">
            <span class="el-icon-pie-chart"></span> {{$t('server.ram')}}
            </div>
            <div><el-tag effect="dark" type="warning">{{$t('server.mem_allocator')}}：{{info.Memory.mem_allocator}}</el-tag></div>
            <div><el-tag effect="dark" type="info">{{$t('server.used_memory_peak_human')}}：{{info.Memory.used_memory_peak_human}}</el-tag></div>
            <div><el-tag effect="dark" type="danger">{{$t('server.used_memory_human')}}：{{info.Memory.used_memory_human}}</el-tag></div>
            <div><el-tag effect="dark" type="success">{{$t('server.used_memory_lua')}}：{{info.Memory.used_memory_lua}}</el-tag></div>
            <div><el-tag effect="dark">{{$t('server.mem_fragmentation_ratio')}}：{{info.Memory.mem_fragmentation_ratio}}</el-tag></div>
          </el-card>
        </el-col>
        <el-col :span="8">
          <el-card class="box-card" v-if="info.Clients">
            <div slot="header" class="clearfix">
              <span class="el-icon-odometer"></span> {{$t('server.status')}}
            </div>
            <div><el-tag effect="dark" type="success">{{$t('server.connected_clients')}}：{{info.Clients.connected_clients}}</el-tag></div>
            <div><el-tag effect="dark" type="danger">{{$t('server.total_commands_processed')}}：{{info.Stats.total_commands_processed}}</el-tag></div>
            <div><el-tag effect="dark" type="info">{{$t('server.instantaneous_ops_per_sec')}}：{{info.Stats.instantaneous_ops_per_sec}}</el-tag></div>
            <div><el-tag effect="dark">{{$t('server.total_net_input_bytes')}}：{{info.Stats.total_net_input_bytes}}/byte</el-tag></div>
            <div><el-tag effect="dark" type="warning">{{$t('server.total_net_output_bytes')}}：{{info.Stats.total_net_output_bytes}}/byte</el-tag></div>
          </el-card>
        </el-col>
      </el-row>
    </div>
    <div class="key-summary">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          {{$t('server.Statistics')}}
        </div>
        <el-table
        :data="info.dbInfo">
        <el-table-column
        prop="name"
        label="DB"
        sortable>
        </el-table-column>
        <el-table-column
        prop="keys"
        label="Keys"
        sortable>
        </el-table-column>
        <el-table-column
        prop="expires"
        label="Expires" sortable>
        </el-table-column>
        <el-table-column
        prop="avg_ttl"
        label="avg_ttl" sortable>
        </el-table-column>
        </el-table>
      </el-card>
    </div>
    <div class="server-config">
      <el-card class="box-card">
      <div slot="header" class="clearfix">
        {{$t('server.SysInfo')}}
      </div>
      <el-table
      :data="info.sysInfo">
      <el-table-column
      prop="key"
      label="key"
      sortable>
      </el-table-column>
      <el-table-column
      prop="value"
      label="value"
      sortable>
      </el-table-column>
      </el-table>
      </el-card>
    </div>
  </div>
</template>

<script>
import storage from '../../redis/storage'
import shell from '../../redis/shell'
export default {
  props:["serverIdx"],
 data() {
    return {
      info:{}
    }
  },
  created(){
    let client=storage.get('client')[this.serverIdx]
    client.infoAsync().then(res=>{
      this.info=shell.resolve(res)
      let keyspace=this.info.Keyspace;
      var itemArray=[];
      for(var item in keyspace){
        var tmp={};
        tmp["name"]=item;
        var varray=keyspace[item].split(",");
        for(var i=0;i<varray.length;i++){
          tmp[varray[i].split("=")[0]]=varray[i].split("=")[1];
        }
        itemArray.push(tmp)
      }
      var sysInfo=[]
      for(var item in this.info){
        for(var sub in this.info[item]){
          sysInfo.push({key:sub,value:this.info[item][sub]})
        }
      }
      this.info["dbInfo"]=itemArray
      this.info["sysInfo"]=sysInfo
    })
  }
}
</script>

<style scoped>
.key-summary{
  margin: 15px 0px;
}
.server-info >>> .el-card__body{
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  font-size: 12px;
  line-height: 35px;
}
</style>